<template>
	<view>
		<view class="msg">
			收货信息
		</view>

		<view class="permsg" @click="haveaddress">
			<view class="one_msg">
				<image class="image_msg" src="../../static/users/person.png" mode=""></image>
				<text>李大宝</text>
			</view>

			<view class="one_msg">
				<image class="image_msg" src="../../static/users/c-phone.png" mode=""></image>
				<text>15282094560</text>
			</view>

			<view class="one_msg">
				<image class="image_msg" src="../../static/users/position.png" mode=""></image>
				<text>成都市武侯区锦悦西路环球中心</text>
			</view>

			<image src="../../static/users/right.png" mode=""></image>
		</view>

		<view class="msg2">
			商品信息
		</view>


		<view class="shop_select">
			<view class="detailback" v-for="(item,index) in menu">
				<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
				<view class="title">
					灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
				</view>

				<view class="have">
					已售100
				</view>

				<view class="price">
					<text>¥</text>
					366
				</view>

				<view class="bujin">
					<image class="image_bu_jian" @click.stop="reduce(index)" src="../../static/users/jian.png"
						mode="aspectFill"></image>
					<view class="num">
						{{item.num}}
					</view>
					<image class="image_bu_jia" @click.stop="add(index)" src="../../static/users/jia.png"
						mode="aspectFill">
					</image>
				</view>
			</view>

			<view class="c_xian"></view>

			<!-- 店铺优惠券 -->
			<view class="hui_c" @click="show = true">
				<text>店铺优惠</text>
				<image src="../../static/users/right.png" mode=""></image>
			</view>


			<u-popup v-model="show" mode="bottom" border-radius="30">
				<view class="popup">
					<view class="all">
						全部优惠
					</view>


					<u-radio-group v-model="value" @change="radioGroupChange" size="50">

						<view class="quan" v-for="(item,index) in list" @click="select(index)">
							<view class="ti">
								店铺优惠券
							</view>
							<view class="price">
								<text>¥</text> {{item.price}}
							</view>
							<view class="use">
								满250元可使用
							</view>

							<view class="date">
								有效期至2020-10-20
							</view>
							<u-radio class="radio" shape="circle" active-color="#F4A47B" :name="index"></u-radio>
						</view>



						<view class="bottom">

						</view>

						<view class="di_c">
							<u-radio class="radios" shape="circle" active-color="#F4A47B" name="-1">不适用本次优惠</u-radio>

							<view class="us">
								确认使用
							</view>

							<view class="xia_x">

							</view>
						</view>
					</u-radio-group>


				</view>
			</u-popup>

			<view class="c_xian"></view>

			<view class="hui_c2">
				<text>订单备注</text>
				<view class="bei_c">
					备注
				</view>
			</view>

		</view>


		<view class="bottom"></view>

		<view class="gosuan">
			<view class="settlement">
				<view class="zi0">共2件 <text class="text_1">合计：</text>
					<text class="text_2">¥</text>
					<text class="text_3">638</text>
				</view>

			</view>

			<view class="go_suan" @click="go">
				确认提交
			</view>

			<view class="xia_"></view>

		</view>
		
         <!-- 弹窗确认取消 -->
		<u-popup v-model="shower" mode="center" border-radius="30">
			<view class="pop">
				<view class="txt_1">抱歉！当前商品，仅支持本校区配送。</view>
				<view class="back" @click="back">
					返回首页
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [{
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}],
				show: false,
				shower: false,
				value: "",
				list: [{
						price: 541
					}, {
						price: 51
					}, {
						price: 41
					}, {
						price: 31
					},

				],
				num: 0
			}
		},
		methods: {
			reduce(index) {
				if (this.menu[index].num > 1) {
					this.menu[index].num--
				}

			},
			add(index) {
				this.menu[index].num++
			},
			radioGroupChange(e) {
				console.log(e);
			},
			go() {
				this.num++
				if (this.num % 2 == 1) {
					this.shower = true
				}
			},
			back() {
				uni.reLaunch({
					url: "../index/index"
				})
			},
			select(index) {
				this.value = index
			},
			haveaddress() {
				uni.navigateTo({
					url: "../showaddress/showaddress"
				})
			}
		}
	}
</script>

<style lang="scss">
	.pop {
		width: 600rpx;
		height: 254rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		overflow: hidden;

		.txt_1 {
			margin: 70rpx 0 0 70rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.back {
			margin: 47rpx 0 0 185rpx;
			width: 230rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	page {
		background-color: #F2F4FA;
	}

	.msg {
		margin: 38rpx 0 11rpx 42rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.msg2 {
		margin: 29rpx 0 11rpx 42rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.permsg {
		margin-left: 30rpx;
		width: 690rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 1px solid #fff;
		position: relative;

		image {
			position: absolute;
			right: 30rpx;
			top: 116rpx;
			width: 10rpx;
			height: 18rpx;
		}

		.one_msg {
			margin: 40rpx 0 0 40rpx;
			width: 650rpx;
			height: 36rpx;
			position: relative;

			.image_msg {
				position: absolute;
				left: 0;
				top: 0;
				width: 34rpx;
				height: 36rpx;
			}

			text {
				margin-left: 65rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 36rpx;
			}
		}
	}

	.gosuan {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
		border-radius: 40rpx 40rpx 0px 0px;

		.settlement {
			width: 280rpx;
			height: 33rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;

			.zi0 {
				margin: 39rpx 0 0 32rpx;

				.text_1 {
					margin-left: 20rpx;
				}

				.text_2 {
					color: #FF4646;
				}

				.text_3 {
					font-size: 40rpx;
					color: #FF4646;
				}
			}
		}

		.go_suan {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 190rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.xia_ {
			position: absolute;
			left: 241rpx;
			bottom: 18rpx;
			width: 268rpx;
			height: 10rpx;
			background-color: black;
		}
	}

	.bottom {
		width: 750rpx;
		height: 493rpx;
	}

	.shop_select {
		margin-left: 30rpx;
		width: 690rpx;
		padding-top: 20rpx;
		padding-bottom: 27rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.detailback {
			height: 190rpx;
			width: 750rpx;
			position: relative;
		}

		.img_detail {
			margin: 20rpx 0 0 30rpx;
			width: 180rpx;
			height: 150rpx;
			border-radius: 20rpx;
		}

		.title {
			position: absolute;
			top: 17rpx;
			left: 232rpx;
			width: 410rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.have {
			position: absolute;
			left: 232rpx;
			top: 63rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
		}

		.price {
			position: absolute;
			top: 102rpx;
			left: 232rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF4646;

			text {
				font-size: 20rpx;
			}
		}

		.guige {
			position: absolute;
			right: 30rpx;
			top: 107rpx;
			width: 89rpx;
			height: 36rpx;
			background: #F48F5B;
			border-radius: 18rpx;
			text-align: center;
			line-height: 36rpx;

			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

		.bujin {
			position: absolute;
			left: 520rpx;
			top: 107rpx;
			width: 200rpx;
			height: 36rpx;

		}

		.image_bu_jian {
			width: 36rpx;
			height: 36rpx;
		}

		.image_bu_jia {
			margin-left: 48rpx;
			width: 36rpx;
			height: 36rpx;
		}

		.num {
			position: absolute;
			left: 36rpx;
			top: 0;
			width: 48rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}


		.c_xian {
			margin-left: 40rpx;
			margin-top: 30rpx;
			width: 610rpx;
			height: 1rpx;
			background: #EEEEEE;
		}

		.hui_c {
			margin: 31rpx 0 30rpx 41rpx;
			width: 610rpx;
			height: 40rpx;
			position: relative;

			text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			image {
				position: absolute;
				right: 20rpx;
				top: 17rpx;
				width: 10rpx;
				height: 18rpx;
			}
		}

		.popup {
			width: 750rpx;
			height: 1116rpx;
			background: #FFFFFF;

			.all {
				margin: 47rpx 0 21rpx 316rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.quan {
				margin-top: 30rpx;
				margin-left: 40rpx;
				width: 670rpx;
				height: 196rpx;
				background: #F2F4FA;
				border-radius: 30rpx;
				position: relative;

				.ti {
					width: 180rpx;
					height: 40rpx;
					background: #181818;
					border-radius: 25rpx 0px 25rpx 0px;
					text-align: center;
					line-height: 40rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					position: absolute;
					top: 72rpx;
					left: 35rpx;
					font-size: 60rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF4646;

					text {
						font-size: 24rpx;
					}
				}

				.use {
					position: absolute;
					top: 72rpx;
					left: 204rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.date {
					position: absolute;
					top: 115rpx;
					left: 204rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.radio {
					position: absolute;
					right: 13rpx;
					top: 73rpx;
				}

			}

			.di_c {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 300rpx;
				background-color: #fff;

				.radios {
					margin: 0 0 0 50rpx;
				}

				.us {
					margin: 50rpx auto;
					width: 610rpx;
					height: 100rpx;
					background: #181818;
					box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
					border-radius: 50rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.xia_x {
					margin: 80rpx 0 0 241rpx;
					width: 268rpx;
					height: 10rpx;
					background-color: #000;
				}
			}
		}

		.hui_c2 {
			margin: 31rpx 0 30rpx 41rpx;
			width: 610rpx;
			height: 40rpx;
			position: relative;

			text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.bei_c {
				position: absolute;
				right: 20rpx;
				top: 6rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

	}
</style>
